<template>
  <div style="height: 100%;overflow-y: hidden;overflow-x: auto">
    <div class="h-table" style="width:100%">
      <table class="h-table-header h-table-header-table" style="width:100%">
        <tr>
          <th class="text-center w60">序号</th>
          <th class="text-center w60" v-for="c in columns" :style="c.width?'width:'+c.width:''">{{c.title}}</th>
        </tr>
      </table>
    </div>
    <div class="h-table-container" style="overflow: auto;width: 100%">
      <Draggable v-if="draggable" :list="data" handle=".mover" animation="500" tag="table"
                 class="h-table-body-table field-table" style="width: 100%;">
        <tr v-for="(it,index) in data.fieldsMeta" :key="it.id" v-show="filter(it)"
            style="background-color: white"
            :class="{'h-table-tr-selected':currentSelectKey==it.id}" @click.prevent="onClick(it)"
        >
          <td class="text-left w60 mover" style="cursor: move;">{{ index + 1 }}</td>
        </tr>
      </Draggable>
      <table  class="h-table-body-table field-table" style="width: 100%;" v-else>
        <tr v-for="(it,index) in data.fieldsMeta" :key="it.id" v-show="filter(it)"
            style="background-color: white"
            :class="{'h-table-tr-selected':currentSelectKey==it.id}" @click.prevent="onClick(it)"
        >
          <td class="text-left w60 mover" style="cursor: move;">{{ index + 1 }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script setup>
import {VueDraggableNext as Draggable} from 'vuedraggable'
import {ref} from 'vue'
const emit = defineEmits(["select"])
const {data,columns,selectable,filter} = defineProps({
  data:{
    type:Array,
    default:[]
  },
  columns:{
    type:Array,
    default:[]
  },
  selectable:{
    type:String,
    default: null
  },
  filter:{
    type:Function,
    default:(it)=>true
  },
  draggable:{
    type:Boolean,
    default: false
  }
})

const currentSelectKey=ref()
function selected(v){
  return  currentSelectKey.value==v[selectKey]
}
function onClick(v){
  if(selectable){
    currentSelectKey.value=v.id
  }
  emit("select",v)
}
</script>
